let { $, table,layer,form,laydate } = layui;
export default class Cls{
    constructor(){
        this.render();
        this.handle();
    }
    render(){
        let template = `
        <!DOCTYPE html>
        <html lang="en">
            <head>
                <meta charset="UTF-8" />
                <meta http-equiv="X-UA-Compatible" content="IE=edge" />
                <meta name="viewport" content="width=device-width, initial-scale=1.0" />
                <title>班级管理</title>
                <!-- <link rel="stylesheet" href="../layui/css/layui.css" /> -->
                <style>
                    .type {
                        width: 100px;
                    }
                    .value {
                        width: 300px;
                    }
                    .addForm{
                        padding:20px;
                    }
                </style>
            </head>
            <body>
                <table id="classTable" lay-filter="classTable"></table>
                <script type="text/html" id="tools">
                        <form class="layui-form" lay-filter="searchForm">
                      <div class="layui-input-inline">
                          <button type="button" class="layui-btn layui-btn-sm" lay-event="add">
                              <i class="layui-icon">&#xe654;</i>
                        </button>
                      </div>
                          <div class="layui-input-inline value">
                              <input readonly type="text" name="startDate" placeholder="请输入起始时间" class="layui-input date">
                          </div>
                          <div class="layui-input-inline value">
                            <input readonly type="text" name="endDate" placeholder="请输入结束时间" class="layui-input date">
                        </div>
                          <div class="layui-input-inline">
                              <button type="button" lay-event="search" class="layui-btn layui-btn-primary layui-btn-sm">
                                  <i class="layui-icon">&#xe615;</i>
                                </button>
                          </div>
                    </div>
                </form>
                </script>
                <!-- <div id="addContent" style="display:none">
                    
                </div> -->
                <script type="text/html" id="action">
                    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"
                        >删除</a
                    >
                </script>
               
            </body>
        </html>
        `
        $("#content").html(template);
    }
    handle(){
        table.render({
            elem: "#classTable",
            url: "/classes", //数据接口
            method: "get",
            toolbar: "#tools",
            page:true,
            limit:5,
            limits:[5,10,15,20,25],
            request: {
                pageName: 'current' //页码的参数名称，默认：page
                ,limitName: 'pageSize' //每页数据量的参数名，默认：limit
            },
            parseData:function(res){
                return {
                    code:0,
                    count:res.data.total,
                    data:res.data.rows
                }
            },
            done(){
                laydate.render({
                    elem:".date"
                });
            },
            cols: [
                [
                    //表头
                    {
                        field: "name",
                        title: "班级名称",
                    },
                    { field: "count", title: "班级人数" },
                    {
                        field: "teacher",
                        title: "带班老师",
                    },
                    {
                        field: "createDate",
                        title: "开班时间",
                    },
                    {
                        title: "操作",
                        templet: "#action",
                    },
                ],
            ],
        });
        
        table.on('toolbar(classTable)', function(obj){
            if(obj.event == "add"){
                layer.open({
                    type: 1, 
                    title:"增加班级",
                    btn:['确定','取消'],
                    success:function(){
                        form.render();
                        laydate.render({
                            elem: '[name=createDate]' //指定元素
                        });
                    },
                    yes:function(index){
                        $.ajax({
                            type:"post",
                            url:"/addClass",
                            data:form.val("addForm"),
                            processData:false,
                            dataType:"json",
                            success(){
                                table.reload("classTable",{
                                    where:{}
                                });
                                layer.close(index);
                            }
                        });
                       
                    },
                    content: `
                    <form class="layui-form addForm" lay-filter="addForm" action="">
                        <div class="layui-form-item">
                            <label class="layui-form-label">班级名称</label>
                            <div class="layui-input-block">
                                <input
                                    type="text"
                                    name="name"
                                    required
                                    lay-verify="required"
                                    placeholder="请输入班级名称"
                                    autocomplete="off"
                                    class="layui-input"
                                />
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">开班人数</label>
                            <div class="layui-input-block">
                                <input
                                    type="text"
                                    name="count"
                                    required
                                    lay-verify="required"
                                    placeholder="请输入开班人数"
                                    autocomplete="off"
                                    class="layui-input"
                                />
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">带班老师</label>
                            <div class="layui-input-block">
                                <input
                                    type="text"
                                    name="teacher"
                                    required
                                    lay-verify="required"
                                    placeholder="请输入带班老师"
                                    autocomplete="off"
                                    class="layui-input"
                                />
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">开班时间</label>
                            <div class="layui-input-block">
                                <input type="text" class="layui-input" name="createDate">
                            </div>
                        </div>
                    </form>
                    `
                });
            }else if(obj.event == "search"){
                // 搜索
                table.reload("classTable",{
                    where:form.val("searchForm")
                });
            }
        })
        table.on('tool(classTable)', function(obj){
            if(obj.event == "del"){
                layer.confirm('是否删除?', function(index){
                    $.ajax({
                        type:"post",
                        url:"/delClass",
                        processData:false,
                        dataType:"json",
                        data:{
                            id:obj.data.id
                        },
                        success(){
                            layer.close(index);
                            table.reload("classTable");
                        }
                    });
                    
                });  
            }else if(obj.event == "edit"){
                layer.open({
                    type: 1, 
                    title:"修改班级",
                    btn:['确定','取消'],
                    success:function(){
                        form.render();
                        laydate.render({
                            elem: '[name=createDate]' //指定元素
                        });
                        $.ajax({
                            type:"post",
                            url:"/findById",
                            processData:false,
                            dataType:"json",
                            data:{
                                id:obj.data.id
                            },
                            success(res){
                                form.val("updateForm",res.cls);
                            }
                        });
                        
                    },
                    yes:function(index){
                        $.ajax({
                            type:"post",
                            url:"/updateClass",
                            data:{
                                id:obj.data.id,
                                ...form.val("updateForm")
                            },
                            processData:false,
                            dataType:"json",
                            success(){
                                table.reload("classTable");
                                layer.close(index);
                            }
                        });
                       
                    },
                    content: `
                    <form class="layui-form addForm" lay-filter="updateForm" action="">
                        
                        <div class="layui-form-item">
                            <label class="layui-form-label">班级名称</label>
                            <div class="layui-input-block">
                                <input
                                    type="text"
                                    name="name"
                                    required
                                    lay-verify="required"
                                    placeholder="班级名称"
                                    autocomplete="off"
                                    class="layui-input"
                                />
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">带班人数</label>
                            <div class="layui-input-block">
                                <input
                                    type="text"
                                    name="count"
                                    required
                                    lay-verify="required"
                                    placeholder="请输入带班人数"
                                    autocomplete="off"
                                    class="layui-input"
                                />
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">带班老师</label>
                            <div class="layui-input-block">
                                <input
                                    type="text"
                                    name="teacher"
                                    required
                                    lay-verify="required"
                                    placeholder="请输入带班老师"
                                    autocomplete="off"
                                    class="layui-input"
                                />
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">开班时间</label>
                            <div class="layui-input-block">
                                <input type="text" class="layui-input" name="createDate">
                            </div>
                        </div>
                    </form>
                    `
                });
            }
        })

    }
}